<!-- 班主任工作日志 -->
<template>
  <div class="pxbCourse">
    <div class="search">
      <div></div>
      <!-- <el-form
        ref="form"
        :model="queryParams.params"
        label-width="0"
        style="display: flex; align-items: center"
      >
        <el-form-item style="margin-bottom: 0">
          <el-input
            v-model="queryParams.params.teacherName"
            placeholder="授课教师"
          ></el-input>
        </el-form-item>
      </el-form> -->
      <div class="button">
        <el-button type="primary" @click="QRCodeVisible"
          ><i class="iconfont icon-erweima"></i> 移动端新增</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="inquire"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="InformationFilling('add')"
          >新增工作日志</el-button
        >
        <!-- <el-button type="danger" icon="el-icon-back" @click="goBack" style="margin-left: 10px"
          >返回</el-button
        > -->
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        height="100%"
        :disabled="disabled"
        :header-cell-style="{
          background: '#f2f3f4',
          color: '#555',
          'font-weight': 'bold',
          'line-height': '32px',
        }"
        border
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="time" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="weather" label="天气" width="120">
        </el-table-column>
        <el-table-column prop="logContent" label="日志内容"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-view"
              @click="InformationFilling('look', scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="InformationFilling('update', scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="InformationDel(scope.row)"
              title="确定删除吗？"
            >
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                slot="reference"
                style="margin-left: 10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="queryMap"
          ref="queryParams"
          :disabled="disabled"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="日期" prop="date">
            <el-date-picker
              style="width: 100%"
              v-model="queryMap.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="时间" prop="time">
            <el-time-picker
              style="width: 100%"
              v-model="queryMap.time"
              value-format="HH:mm:ss"
              placeholder="选择时间"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="天气" prop="weather">
            <el-input v-model="queryMap.weather"></el-input>
          </el-form-item>
          <el-form-item label="日志内容" prop="logContent">
            <el-input
              v-model="queryMap.logContent"
              type="textarea"
              rows="4"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="移动端新增" :visible.sync="dialogVisible2" width="30%">
      <div>
        <img :src="qrCode" alt="QR Code"  style="width: 100%"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  headTeacherLogPaging,
  headTeacherLogDetail,
  headTeacherLogDelete,
  headTeacherLogAdd,
  headTeacherLogUpdate,
} from "@/api/OneStageOneGear/OneStageOneGear.js";
import QRCode from "qrcode";
export default {
  data() {
    return {
      dialogVisible2: false,
      qrCode: "",
      tableData: [],
      title: "",
      queryMap: {
        date: "",
        id: "",
        logContent: "",
        time: "",
        trainingClassInfoId: this.$route.query.id,
        weather: "",
      },
      total: 0,
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          date: "",
          id: "",
          logContent: "",
          time: "",
          trainingClassInfoId: this.$route.query.id,
          weather: "",
        },
        size: 10,
      },
      dialogVisible: false,
      disabled: false,
      rules: {
        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
        weather: [{ required: true, message: "请输入天气", trigger: "blur" }],
        logContent: [
          { required: true, message: "请输入日志内容", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async QRCodeVisible() {
      this.dialogVisible2 = true;
      let url ='http://'+ window.location.host +"/#/HeadHeacher?id=" + this.$route.query.id;
      console.log(url);
      
      try {
        this.qrCode = await QRCode.toDataURL(url);
      } catch (err) {
        console.error('生成二维码时发生错误:', err);
      }
      console.log(this.qrCode);
    },
    inquire() {
      this.queryParams.current = 1;
      this.getList();
    },
    reset() {
      this.$refs.queryMap.resetFields();
    },
    //查看、修改、新增
    InformationFilling(type, row) {
      if (type == "look") {
        this.title = "查看工作日志";
        this.disabled = true;
        this.InformationDetails(row);
      } else if (type == "update") {
        this.title = "修改工作日志";
        this.disabled = false;
        this.InformationDetails(row);
      } else if (type == "add") {
        this.title = "新增工作日志";
        this.disabled = false;
        this.queryMap = {
          date: "",
          id: "",
          logContent: "",
          time: "",
          trainingClassInfoId: this.$route.query.id,
          weather: "",
        };
      }
      this.dialogVisible = true;
    },
    //新增/修改
    async addCourse() {
      this.$refs.queryParams.validate(async (valid) => {
        if (valid) {
          if (this.title == "修改工作日志") {
            let res = await headTeacherLogUpdate(this.queryMap);
            if (res.code == 200) {
              this.$message({ message: "修改成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else if (this.title == "新增工作日志") {
            let res = await headTeacherLogAdd(this.queryMap);
            if (res.code == 200) {
              this.$message({ message: "添加成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else {
            this.dialogVisible = false;
          }
        } else {
        }
      });
    },
    async InformationDetails(row) {
      console.log(row);

      let res = await headTeacherLogDetail(row.id);
      if (res.code == 200) {
        this.queryMap = res.data;
      }
    },
    async getList() {
      let res = await headTeacherLogPaging(this.queryParams);
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    async InformationDel(row) {
      let res = await headTeacherLogDelete(row.id);
      if (res.code == 200) {
        this.$message({ message: "删除成功", type: "success" });
        this.getList();
      } else {
        this.$message({ message: "删除失败", type: "error" });
      }
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.pxbCourse {
  height: calc(100vh - 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .button {
      display: flex;
      justify-content: flex-end;
    }
  }
  .table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 50px);
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
